<template>
  <div class="exam-detail-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <Breadcrumb :items="breadcrumbItems" />
        
        <div v-if="!loading && exam" class="exam-header">
          <div class="exam-info">
            <div class="exam-meta">
              <el-tag
                :type="getExamStatusType(exam.status)"
                size="large"
                class="status-tag"
              >
                {{ getExamStatusText(exam.status) }}
              </el-tag>
              <span class="exam-category">{{ exam.category }}</span>
            </div>
            
            <h1 class="exam-title">{{ exam.title }}</h1>
            
            <div class="exam-stats">
              <div class="stat-item">
                <el-icon><Clock /></el-icon>
                <span>{{ exam.duration }}分钟</span>
              </div>
              <div class="stat-item">
                <el-icon><EditPen /></el-icon>
                <span>{{ exam.questionCount }}题</span>
              </div>
              <div class="stat-item">
                <el-icon><User /></el-icon>
                <span>{{ exam.participantCount }}人参与</span>
              </div>
              <div class="stat-item">
                <el-icon><Star /></el-icon>
                <span>{{ exam.passRate }}%通过率</span>
              </div>
            </div>
            
            <div class="exam-description">
              <p>{{ exam.description }}</p>
            </div>
          </div>
          
          <div class="exam-actions">
            <div class="action-buttons">
              <el-button
                v-if="canStartExam"
                type="primary"
                size="large"
                @click="startExam"
              >
                开始考试
              </el-button>
              
              <el-button
                v-if="canContinueExam"
                type="primary"
                size="large"
                @click="continueExam"
              >
                继续考试
              </el-button>
              
              <el-button
                v-if="canViewResult"
                type="success"
                size="large"
                @click="viewResult"
              >
                查看成绩
              </el-button>
              
              <el-button
                v-if="canRetakeExam"
                type="warning"
                size="large"
                @click="retakeExam"
              >
                重新考试
              </el-button>
              
              <el-button
                size="large"
                @click="addToFavorites"
                :disabled="isFavorited"
              >
                <el-icon><Star /></el-icon>
                {{ isFavorited ? '已收藏' : '收藏' }}
              </el-button>
            </div>
            
            <div v-if="userExamRecord" class="exam-record">
              <div class="record-item">
                <span class="label">最高分数:</span>
                <span class="value">{{ userExamRecord.bestScore }}分</span>
              </div>
              <div class="record-item">
                <span class="label">考试次数:</span>
                <span class="value">{{ userExamRecord.attemptCount }}次</span>
              </div>
              <div class="record-item">
                <span class="label">最后考试:</span>
                <span class="value">{{ formatDate(userExamRecord.lastAttemptAt) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 主要内容 -->
    <div class="exam-content">
      <div class="container">
        <div class="content-layout">
          <!-- 主要信息 -->
          <div class="main-content">
            <!-- 考试详情 -->
            <div class="exam-details">
              <div class="section-header">
                <h2 class="section-title">考试详情</h2>
              </div>
              
              <div class="details-grid">
                <div class="detail-item">
                  <div class="detail-label">考试时长</div>
                  <div class="detail-value">{{ exam?.duration }}分钟</div>
                </div>
                
                <div class="detail-item">
                  <div class="detail-label">题目数量</div>
                  <div class="detail-value">{{ exam?.questionCount }}题</div>
                </div>
                
                <div class="detail-item">
                  <div class="detail-label">及格分数</div>
                  <div class="detail-value">{{ exam?.passScore }}分</div>
                </div>
                
                <div class="detail-item">
                  <div class="detail-label">考试次数</div>
                  <div class="detail-value">
                    {{ exam?.maxAttempts === -1 ? '不限' : `最多${exam?.maxAttempts}次` }}
                  </div>
                </div>
                
                <div class="detail-item">
                  <div class="detail-label">开始时间</div>
                  <div class="detail-value">{{ formatDate(exam?.startTime) }}</div>
                </div>
                
                <div class="detail-item">
                  <div class="detail-label">结束时间</div>
                  <div class="detail-value">{{ formatDate(exam?.endTime) }}</div>
                </div>
              </div>
            </div>
            
            <!-- 考试说明 -->
            <div class="exam-instructions">
              <div class="section-header">
                <h2 class="section-title">考试说明</h2>
              </div>
              
              <div class="instructions-content">
                <div class="instruction-item">
                  <el-icon class="instruction-icon"><InfoFilled /></el-icon>
                  <div class="instruction-text">
                    <h4>考试规则</h4>
                    <ul>
                      <li>考试时间为{{ exam?.duration }}分钟，请合理安排答题时间</li>
                      <li>考试过程中不允许切换到其他页面或应用</li>
                      <li>每题只能选择一次，提交后不可修改</li>
                      <li>考试结束后系统将自动提交答案</li>
                    </ul>
                  </div>
                </div>
                
                <div class="instruction-item">
                  <el-icon class="instruction-icon"><WarningFilled /></el-icon>
                  <div class="instruction-text">
                    <h4>注意事项</h4>
                    <ul>
                      <li>请确保网络连接稳定，避免考试中断</li>
                      <li>建议使用Chrome或Firefox浏览器</li>
                      <li>考试期间请保持安静的环境</li>
                      <li>如遇技术问题，请及时联系客服</li>
                    </ul>
                  </div>
                </div>
                
                <div class="instruction-item">
                  <el-icon class="instruction-icon"><CircleCheckFilled /></el-icon>
                  <div class="instruction-text">
                    <h4>评分标准</h4>
                    <ul>
                      <li>单选题：每题{{ exam?.singleChoiceScore || 2 }}分</li>
                      <li>多选题：每题{{ exam?.multipleChoiceScore || 3 }}分</li>
                      <li>判断题：每题{{ exam?.judgeScore || 1 }}分</li>
                      <li>总分{{ exam?.totalScore || 100 }}分，{{ exam?.passScore || 60 }}分及格</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 题型分布 -->
            <div class="question-distribution">
              <div class="section-header">
                <h2 class="section-title">题型分布</h2>
              </div>
              
              <div class="distribution-chart">
                <div
                  v-for="type in questionTypes"
                  :key="type.type"
                  class="type-item"
                >
                  <div class="type-info">
                    <div class="type-name">{{ type.name }}</div>
                    <div class="type-count">{{ type.count }}题</div>
                    <div class="type-score">{{ type.totalScore }}分</div>
                  </div>
                  <div class="type-progress">
                    <el-progress
                      :percentage="(type.count / exam?.questionCount) * 100"
                      :stroke-width="8"
                      :show-text="false"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 考试记录 -->
            <div v-if="examRecords.length > 0" class="exam-records">
              <div class="section-header">
                <h2 class="section-title">历史记录</h2>
              </div>
              
              <div class="records-table">
                <el-table :data="examRecords" stripe>
                  <el-table-column prop="attemptNumber" label="次数" width="80" />
                  <el-table-column prop="score" label="分数" width="100">
                    <template #default="{ row }">
                      <span :class="{ 'passed': row.score >= exam?.passScore }">
                        {{ row.score }}分
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="duration" label="用时" width="100">
                    <template #default="{ row }">
                      {{ Math.floor(row.duration / 60) }}分{{ row.duration % 60 }}秒
                    </template>
                  </el-table-column>
                  <el-table-column prop="completedAt" label="完成时间">
                    <template #default="{ row }">
                      {{ formatDate(row.completedAt) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="状态" width="100">
                    <template #default="{ row }">
                      <el-tag
                        :type="row.score >= exam?.passScore ? 'success' : 'danger'"
                        size="small"
                      >
                        {{ row.score >= exam?.passScore ? '通过' : '未通过' }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="120">
                    <template #default="{ row }">
                      <el-button
                        size="small"
                        text
                        @click="viewRecordDetail(row.id)"
                      >
                        查看详情
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          
          <!-- 侧边栏 -->
          <div class="sidebar">
            <!-- 相关考试 -->
            <div class="related-exams">
              <div class="sidebar-header">
                <h3 class="sidebar-title">相关考试</h3>
              </div>
              
              <div class="related-list">
                <div
                  v-for="relatedExam in relatedExams"
                  :key="relatedExam.id"
                  class="related-item"
                  @click="viewExam(relatedExam.id)"
                >
                  <div class="related-info">
                    <div class="related-title">{{ relatedExam.title }}</div>
                    <div class="related-meta">
                      <span class="duration">{{ relatedExam.duration }}分钟</span>
                      <span class="questions">{{ relatedExam.questionCount }}题</span>
                    </div>
                  </div>
                  <div class="related-status">
                    <el-tag
                      :type="getExamStatusType(relatedExam.status)"
                      size="small"
                    >
                      {{ getExamStatusText(relatedExam.status) }}
                    </el-tag>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 学习建议 -->
            <div class="study-suggestions">
              <div class="sidebar-header">
                <h3 class="sidebar-title">学习建议</h3>
              </div>
              
              <div class="suggestions-list">
                <div
                  v-for="suggestion in studySuggestions"
                  :key="suggestion.id"
                  class="suggestion-item"
                >
                  <div class="suggestion-icon">
                    <el-icon><component :is="suggestion.icon" /></el-icon>
                  </div>
                  <div class="suggestion-content">
                    <div class="suggestion-title">{{ suggestion.title }}</div>
                    <div class="suggestion-desc">{{ suggestion.description }}</div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 考试统计 -->
            <div class="exam-statistics">
              <div class="sidebar-header">
                <h3 class="sidebar-title">考试统计</h3>
              </div>
              
              <div class="statistics-list">
                <div class="statistic-item">
                  <div class="statistic-label">平均分</div>
                  <div class="statistic-value">{{ examStats.averageScore }}分</div>
                </div>
                
                <div class="statistic-item">
                  <div class="statistic-label">最高分</div>
                  <div class="statistic-value">{{ examStats.highestScore }}分</div>
                </div>
                
                <div class="statistic-item">
                  <div class="statistic-label">通过率</div>
                  <div class="statistic-value">{{ examStats.passRate }}%</div>
                </div>
                
                <div class="statistic-item">
                  <div class="statistic-label">参与人数</div>
                  <div class="statistic-value">{{ examStats.participantCount }}人</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <Loading v-if="loading" />
    
    <!-- 确认对话框 -->
    <el-dialog
      v-model="showConfirmDialog"
      title="确认开始考试"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="confirm-content">
        <div class="confirm-icon">
          <el-icon :size="48" color="#E6A23C"><WarningFilled /></el-icon>
        </div>
        <div class="confirm-text">
          <p>您即将开始考试，请确认以下信息：</p>
          <ul>
            <li>考试时长：{{ exam?.duration }}分钟</li>
            <li>题目数量：{{ exam?.questionCount }}题</li>
            <li>及格分数：{{ exam?.passScore }}分</li>
            <li>考试开始后不可暂停或重新开始</li>
          </ul>
          <p class="warning-text">请确保您已做好充分准备！</p>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="showConfirmDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmStartExam">确认开始</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Clock, EditPen, User, Star, InfoFilled, WarningFilled,
  CircleCheckFilled, Reading, Trophy
} from '@element-plus/icons-vue'
import { useExamStore } from '@/stores/exam'
import { useUserStore } from '@/stores/user'
import Breadcrumb from '@/components/common/Breadcrumb.vue'
import Loading from '@/components/common/Loading.vue'
import { formatDate } from '@/utils/format'

const route = useRoute()
const router = useRouter()
const examStore = useExamStore()
const userStore = useUserStore()

// 响应式数据
const loading = ref(true)
const exam = ref(null)
const userExamRecord = ref(null)
const examRecords = ref([])
const relatedExams = ref([])
const isFavorited = ref(false)
const showConfirmDialog = ref(false)

// 题型分布
const questionTypes = ref([
  { type: 'single', name: '单选题', count: 20, totalScore: 40 },
  { type: 'multiple', name: '多选题', count: 10, totalScore: 30 },
  { type: 'judge', name: '判断题', count: 30, totalScore: 30 }
])

// 学习建议
const studySuggestions = ref([
  {
    id: 1,
    title: '复习相关课程',
    description: '建议先完成相关课程的学习',
    icon: 'Reading'
  },
  {
    id: 2,
    title: '练习模拟题',
    description: '通过练习题熟悉考试题型',
    icon: 'EditPen'
  },
  {
    id: 3,
    title: '查看考试技巧',
    description: '掌握答题技巧提高通过率',
    icon: 'Trophy'
  }
])

// 考试统计
const examStats = reactive({
  averageScore: 78.5,
  highestScore: 95,
  passRate: 85.2,
  participantCount: 1248
})

// 面包屑导航
const breadcrumbItems = computed(() => [
  { title: '首页', path: '/' },
  { title: '考试中心', path: '/exams' },
  { title: exam.value?.title || '考试详情', path: '' }
])

// 计算属性
const canStartExam = computed(() => {
  if (!exam.value || !userStore.isLoggedIn) return false
  
  const now = new Date()
  const startTime = new Date(exam.value.startTime)
  const endTime = new Date(exam.value.endTime)
  
  return (
    now >= startTime &&
    now <= endTime &&
    exam.value.status === 'active' &&
    (!userExamRecord.value || 
     (exam.value.maxAttempts === -1 || 
      userExamRecord.value.attemptCount < exam.value.maxAttempts))
  )
})

const canContinueExam = computed(() => {
  return (
    userExamRecord.value &&
    userExamRecord.value.status === 'in_progress'
  )
})

const canViewResult = computed(() => {
  return (
    userExamRecord.value &&
    userExamRecord.value.status === 'completed'
  )
})

const canRetakeExam = computed(() => {
  if (!exam.value || !userExamRecord.value) return false
  
  return (
    exam.value.allowRetake &&
    userExamRecord.value.status === 'completed' &&
    (exam.value.maxAttempts === -1 || 
     userExamRecord.value.attemptCount < exam.value.maxAttempts)
  )
})

// 方法
const getExamStatusType = (status) => {
  const statusMap = {
    'active': 'success',
    'upcoming': 'warning',
    'ended': 'info',
    'draft': 'info'
  }
  return statusMap[status] || 'info'
}

const getExamStatusText = (status) => {
  const statusMap = {
    'active': '进行中',
    'upcoming': '即将开始',
    'ended': '已结束',
    'draft': '草稿'
  }
  return statusMap[status] || '未知'
}

const startExam = () => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  
  showConfirmDialog.value = true
}

const confirmStartExam = async () => {
  try {
    showConfirmDialog.value = false
    
    // 创建考试记录
    const examRecord = await examStore.startExam(exam.value.id)
    
    // 跳转到考试页面
    router.push(`/exam/${exam.value.id}/take/${examRecord.id}`)
  } catch (error) {
    ElMessage.error('开始考试失败')
  }
}

const continueExam = () => {
  router.push(`/exam/${exam.value.id}/take/${userExamRecord.value.id}`)
}

const viewResult = () => {
  router.push(`/exam/${exam.value.id}/result/${userExamRecord.value.id}`)
}

const retakeExam = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要重新考试吗？这将开始一次新的考试。',
      '确认重考',
      { type: 'warning' }
    )
    
    startExam()
  } catch (error) {
    // 用户取消
  }
}

const addToFavorites = async () => {
  try {
    if (isFavorited.value) {
      await examStore.unfavoriteExam(exam.value.id)
      isFavorited.value = false
      ElMessage.success('已取消收藏')
    } else {
      await examStore.favoriteExam(exam.value.id)
      isFavorited.value = true
      ElMessage.success('已添加到收藏')
    }
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

const viewExam = (examId) => {
  router.push(`/exam/${examId}`)
}

const viewRecordDetail = (recordId) => {
  router.push(`/exam/${exam.value.id}/result/${recordId}`)
}

// 获取考试详情
const fetchExamDetail = async () => {
  try {
    loading.value = true
    
    const examId = route.params.id
    
    // 获取考试详情
    exam.value = await examStore.getExamDetail(examId)
    
    // 获取用户考试记录
    if (userStore.isLoggedIn) {
      userExamRecord.value = await examStore.getUserExamRecord(examId)
      examRecords.value = await examStore.getExamRecords(examId)
      isFavorited.value = await examStore.checkFavoriteStatus(examId)
    }
    
    // 获取相关考试
    relatedExams.value = await examStore.getRelatedExams(examId)
    
    // 更新题型分布
    if (exam.value.questionDistribution) {
      questionTypes.value = exam.value.questionDistribution
    }
    
  } catch (error) {
    ElMessage.error('获取考试详情失败')
    router.push('/exams')
  } finally {
    loading.value = false
  }
}

// 生命周期
onMounted(() => {
  fetchExamDetail()
})
</script>

<style lang="scss" scoped>
.exam-detail-page {
  min-height: 100vh;
  background: var(--el-bg-color-page);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

// 页面头部
.page-header {
  background: var(--el-bg-color);
  padding: 20px 0 40px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  
  .exam-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-top: 20px;
    
    .exam-info {
      flex: 1;
      
      .exam-meta {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        
        .status-tag {
          font-weight: 500;
        }
        
        .exam-category {
          color: var(--el-text-color-secondary);
          font-size: 14px;
        }
      }
      
      .exam-title {
        font-size: 2rem;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin-bottom: 20px;
        line-height: 1.3;
      }
      
      .exam-stats {
        display: flex;
        gap: 32px;
        margin-bottom: 20px;
        
        .stat-item {
          display: flex;
          align-items: center;
          gap: 6px;
          color: var(--el-text-color-regular);
          font-size: 14px;
          
          .el-icon {
            color: var(--el-color-primary);
          }
        }
      }
      
      .exam-description {
        color: var(--el-text-color-regular);
        line-height: 1.6;
        
        p {
          margin: 0;
        }
      }
    }
    
    .exam-actions {
      flex-shrink: 0;
      min-width: 280px;
      
      .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
        
        .el-button {
          width: 100%;
          justify-content: center;
        }
      }
      
      .exam-record {
        background: var(--el-bg-color-page);
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 8px;
        padding: 16px;
        
        .record-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          .label {
            color: var(--el-text-color-secondary);
            font-size: 14px;
          }
          
          .value {
            color: var(--el-text-color-primary);
            font-weight: 500;
          }
        }
      }
    }
  }
}

// 主要内容
.exam-content {
  padding: 40px 0;
  
  .content-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    
    .main-content {
      .section-header {
        margin-bottom: 24px;
        
        .section-title {
          font-size: 1.5rem;
          font-weight: 600;
          color: var(--el-text-color-primary);
          margin: 0;
        }
      }
    }
  }
}

// 考试详情
.exam-details {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 32px;
  
  .details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    
    .detail-item {
      .detail-label {
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 6px;
      }
      
      .detail-value {
        color: var(--el-text-color-primary);
        font-weight: 500;
        font-size: 16px;
      }
    }
  }
}

// 考试说明
.exam-instructions {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 32px;
  
  .instructions-content {
    .instruction-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 24px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .instruction-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--el-color-primary-light-9);
        border-radius: 50%;
        color: var(--el-color-primary);
        flex-shrink: 0;
        margin-top: 4px;
      }
      
      .instruction-text {
        flex: 1;
        
        h4 {
          font-size: 16px;
          font-weight: 600;
          color: var(--el-text-color-primary);
          margin: 0 0 8px 0;
        }
        
        ul {
          margin: 0;
          padding-left: 20px;
          color: var(--el-text-color-regular);
          line-height: 1.6;
          
          li {
            margin-bottom: 4px;
          }
        }
      }
    }
  }
}

// 题型分布
.question-distribution {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 32px;
  
  .distribution-chart {
    .type-item {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 20px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .type-info {
        min-width: 120px;
        
        .type-name {
          font-weight: 500;
          color: var(--el-text-color-primary);
          margin-bottom: 4px;
        }
        
        .type-count {
          color: var(--el-text-color-secondary);
          font-size: 14px;
        }
        
        .type-score {
          color: var(--el-color-primary);
          font-size: 14px;
          font-weight: 500;
        }
      }
      
      .type-progress {
        flex: 1;
      }
    }
  }
}

// 考试记录
.exam-records {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  padding: 32px;
  
  .records-table {
    :deep(.el-table) {
      .passed {
        color: var(--el-color-success);
        font-weight: 500;
      }
    }
  }
}

// 侧边栏
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  
  .sidebar-header {
    .sidebar-title {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--el-text-color-primary);
      margin: 0 0 16px 0;
    }
  }
}

// 相关考试
.related-exams {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  padding: 24px;
  
  .related-list {
    .related-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 6px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &:hover {
        border-color: var(--el-color-primary);
        background: var(--el-color-primary-light-9);
      }
      
      .related-info {
        flex: 1;
        
        .related-title {
          font-weight: 500;
          color: var(--el-text-color-primary);
          margin-bottom: 6px;
          font-size: 14px;
          line-height: 1.4;
        }
        
        .related-meta {
          display: flex;
          gap: 8px;
          color: var(--el-text-color-secondary);
          font-size: 12px;
        }
      }
      
      .related-status {
        flex-shrink: 0;
      }
    }
  }
}

// 学习建议
.study-suggestions {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  padding: 24px;
  
  .suggestions-list {
    .suggestion-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .suggestion-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--el-color-warning-light-9);
        border-radius: 50%;
        color: var(--el-color-warning);
        flex-shrink: 0;
      }
      
      .suggestion-content {
        flex: 1;
        
        .suggestion-title {
          font-weight: 500;
          color: var(--el-text-color-primary);
          margin-bottom: 4px;
          font-size: 14px;
        }
        
        .suggestion-desc {
          color: var(--el-text-color-secondary);
          font-size: 12px;
          line-height: 1.4;
        }
      }
    }
  }
}

// 考试统计
.exam-statistics {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  padding: 24px;
  
  .statistics-list {
    .statistic-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .statistic-label {
        color: var(--el-text-color-secondary);
        font-size: 14px;
      }
      
      .statistic-value {
        color: var(--el-text-color-primary);
        font-weight: 500;
      }
    }
  }
}

// 确认对话框
.confirm-content {
  text-align: center;
  
  .confirm-icon {
    margin-bottom: 16px;
  }
  
  .confirm-text {
    text-align: left;
    
    p {
      margin-bottom: 12px;
      color: var(--el-text-color-primary);
    }
    
    ul {
      margin: 12px 0;
      padding-left: 20px;
      color: var(--el-text-color-regular);
      
      li {
        margin-bottom: 6px;
      }
    }
    
    .warning-text {
      color: var(--el-color-warning);
      font-weight: 500;
      text-align: center;
      margin-top: 16px;
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .exam-content {
    .content-layout {
      grid-template-columns: 1fr;
      gap: 24px;
      
      .sidebar {
        order: -1;
        
        > div {
          display: inline-block;
          width: calc(50% - 12px);
          margin-right: 24px;
          vertical-align: top;
          
          &:nth-child(even) {
            margin-right: 0;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
  
  .page-header {
    padding: 16px 0 24px;
    
    .exam-header {
      flex-direction: column;
      gap: 24px;
      
      .exam-info {
        .exam-title {
          font-size: 1.5rem;
        }
        
        .exam-stats {
          flex-wrap: wrap;
          gap: 16px;
        }
      }
      
      .exam-actions {
        min-width: auto;
        width: 100%;
      }
    }
  }
  
  .exam-content {
    padding: 24px 0;
    
    .content-layout {
      .main-content {
        .exam-details,
        .exam-instructions,
        .question-distribution,
        .exam-records {
          padding: 20px;
        }
        
        .details-grid {
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 16px;
        }
      }
      
      .sidebar {
        > div {
          display: block;
          width: 100%;
          margin-right: 0;
          margin-bottom: 16px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .page-header {
    .exam-header {
      .exam-info {
        .exam-stats {
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
        }
      }
    }
  }
  
  .exam-content {
    .content-layout {
      .main-content {
        .details-grid {
          grid-template-columns: 1fr;
        }
        
        .instruction-item {
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 12px;
          
          .instruction-icon {
            margin-top: 0;
          }
        }
      }
    }
  }
  
  .related-exams {
    .related-list {
      .related-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        
        .related-status {
          align-self: flex-end;
        }
      }
    }
  }
}
</style>